<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import {ref, reactive,computed,watch} from 'vue'
let msg=ref('标题样')

let user=ref({
  username:'Evan',
  age:18,
})


let param=ref('Evan')
const person=reactive({
  username:'Evan',
  age:12
})

const params=reactive({
  username:'Evan',
  age:12
})

function revseMsg(value){
   return value.split('').reverse().join(',')
}

function setMsg(){
    msg.value='标题已经修改'

  console.log(msg)
  }


function setUserAge(){
   user.value.age=19;
   console.log(user);
}

function setPersonAge(){
  person.age=19;
  console.log(person)
}
function setParam(username,event){
     params.username=username;
     console.log(event);
}

const  returnMsg=computed({
  get:()=>{
    console.log(222)
    return   param.value.split('').reverse().join(',')
  },
  set:(value)=>{
    param.value=value.split(',').reverse().join(',')
  }
})

watch(param,(newValue,oldValue)=>{
   console.log("newValue:"+newValue)
   console.log("oldValue:"+oldValue)
})

function changeParam(str,event){
   param.value=str
}
let toggle=ref(true)
</script>

<template>
  <h1 :class="{box:true,bgRed:toggle}" @click="toggle=!toggle"></h1>
  <br/>
  <br/>
  <h1>{{msg}}</h1>
  <h1>{{revseMsg(msg)}}</h1>
  <button @click="setMsg">点击修改</button>
  <div>
    <h1>用户信息</h1>
    <h2>用户名：{{user.username}}</h2>
    <h2>年龄：{{user.age}}</h2>
    <button @click="setUserAge">修改数据</button>
  </div>
  <div>
    <h1>个人信息修改</h1>
    <h2>用户名：{{person.username}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="setPersonAge">修改数据</button>
  </div>
  <div>
    <h1>事件对象与传递参数</h1>
    <h2>用户名：{{params.username}}</h2>
    <h2>年龄：{{params.age}}</h2>
    <button @click="setParam('老王',$event)">参数修改</button>
  </div>
  <div>
    <h1>计算属性</h1>
    <h2>计算值：{{param}}</h2>
    <h2>计算值：{{returnMsg}}</h2>
    <h2>计算值：{{returnMsg}}</h2>
    <button @click="changeParam('老王',$event)">参数修改</button>
  </div>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue"/>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.box{
  width: 200px;
  height: 200px;
  background-color:purple;
}
.bgRed{
  background-color: red;
}
</style>
